<!--
 * @Author: GKN
 * @Date: 2023-08-21 09:50:57
 * @LastEditTime: 2024-01-16 10:10:06
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\accordion.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="or-container">
        <div class="box" :class="eleindex ==i?'eleactive':''" v-for="(ele,i) in list" :key="i" @mouseenter="enter(i)" @click="goInfo(ele,ele.name)">
            <img :src="proxy.$api.prefix_img+ele.thumb">
            <div class="title" v-if="eleindex !=i">
                <div class="t1" style="font-size: 18px;">{{ele.name}}</div>
            </div>
            <div class="title1" v-if="eleindex ==i">
                <div class="t1 omit">{{ele.name}}</div>
                <div class="t2 omit">{{ele.sName||''}}</div>
            </div>
        </div>
    </div>
  </template>
  <script setup>
  import CryptoJS from 'crypto-js';
  import { ref,reactive, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import { useRouter } from "vue-router";
  const Router = useRouter();
//   interface Item {
//     icon?: string
//     activeIcon?: string
//     title: string
//   }
const props = defineProps({
    list: {
            type: Object,
            default: [],
        },
        title:{
          type: String,
          default: '',
        }
    })
  
  const eleindex = ref(0)
  const enter=(i)=> {
        eleindex.value = i
        // if (this.eleindex === i) {
        //   this.eleindex = -1
        // } else {
        //   this.eleindex = i
        // }
      }
  const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info',
        query:{
            ob:proxy.$comJs.encry({
                title:props.title,
                id:item.newsId,
                path:'/animatedly/list',
                first_title:'创新活动',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
  }
  </script>
  <style lang="less" scoped>
  /*手风琴样式*/
.or-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  
}
.or-container:before {
  background-color: rgba(0,0,0,0.4);
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
  position: relative;
}

.box > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: .5s;
}

.box > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}

.eleactive {
  flex: 1 1 65%;
}

.eleactive > img {
  width: 100%;
  height: 100%;
}
  /*end*/
.title{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    color: #fff;
    display: flex;
    // align-items: center;
    padding: 16px;
    justify-content: center;
    .t1{
      writing-mode: vertical-rl;
        height: 100%;
        width: 30px;
        letter-spacing: 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    div{
        width: 20px;  
        margin: 0 auto;  
        line-height: 26px;  
        font-size: 20px;
    }
}
.title1{
  width:100%;
  padding: 5px 28px;
  position: absolute;
  bottom: 0;
  left: 0;
  
  text-align: left;
  
  .t1{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
  }
  .t2{
    font-size: 18px;
    color: #fff;
    height: 30px;
    line-height:30px;
  }
}
  </style>
  
  
